<template>
  <div>
      <!-- 表格   -->
    <el-table
    :data="page.records"
    border
    style="width: 50%;">
        <el-table-column
        prop="id"
        label="福利ID"
        width="150">
        </el-table-column>
        <el-table-column
        prop=""
        label="福利"
         width="220">
        <template slot-scope="scope">
            <el-tag>{{scope.row.welfareName}}</el-tag>
        </template>
        </el-table-column>
         <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
          size="mini"
          type="wargin"
          @click="delById(scope.row.id)">删除</el-button>
         <el-button
           size="mini"
           type="waring"
           @click="editById(scope.row.id)">编辑</el-button>
        </template>
    </el-table-column>
  </el-table>


        <el-dialog
  title="编辑"
  :visible.sync="dialogVisible"
  width="35%"
  :before-close="handleClose">
<el-form ref="form" :model="welfare" label-width="120px">
  <el-form-item label="福利名">
        <el-input v-model="welfare.welfareName"></el-input>
    </el-form-item>
</el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="success" @click="saveOrUpdatewelfare()">保 存</el-button>
  </span>
</el-dialog>
       <el-pagination
       style="display:inline-block;margin-top:10px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.current"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="page.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total">
    </el-pagination>
        <el-button style="margin-top:15px;margin-left:100px" type="primary" @click="add()">添加</el-button>



       
  </div>
</template>

<script>
import {findwelfare,findwelfareById,delwelfareById,saveOrUpdatewelfare} from '@/api/info'
export default {
    data() {
        return {
            page:{
                current:1,
                size:10,
                total:0
            },
            welfare:{},
            dialogVisible:false
        }
    },
    methods: {
        async findwelfare(){
            let {data} = await findwelfare(this.page);
            this.page = data
        },
        handleSizeChange(val) {
        this.page.size  = val
        this.condition()
        },
        handleCurrentChange(val) {
            this.page.current = val
            this.condition()
        },
        async editById(id){
            let {data} = await findwelfareById(id)
            this.welfare = data
            this.dialogVisible = true
        },
        async delwelfareById(id){
            let {message} = await delwelfareById(id)
            this.$message.success(message)
            this.condition()
        },
        async saveOrUpdatewelfare(){
            let {message} = await saveOrUpdatewelfare(this.welfare)
             this.$message.success(message)
             this.condition()
             this.dialogVisible = false
        },
          handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
        },
        add(){
            this.welfare = {}
            this.dialogVisible = true
        }
        
    },
    mounted() {
        this.findwelfare()
    },
}
</script>

<style>

</style>